<section>
  <header><h3>主要导航</h3></header>
  <article>
    <p><code>.nav-primary</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-primary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header>
    <h3>次要导航</h3>
  </header>
  <article>
    <p>通常与主导航一起使用</p>
    <p><code>.nav-secondary</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-secondary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li>
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>复合导航</h3></header>
  <article>
    <p>复合导航包含一个主要导航和一个次要导航</p>
    <h3>标签页导航</h3>
    <p><code>.nav-tabs</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li>
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>圆点导航</h3></header>
  <article>
    <p><code>.nav-pills</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-pills">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li>
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>禁用的导航链接</h3></header>
  <article>
    <p>在禁用的项目上添加<code>.disabled</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-pills">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>垂直排列</h3></header>
  <article>
    <p><code>.nav-stacked</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-primary nav-stacked">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary nav-stacked">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-stacked nav-pills">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>自适应宽度</h3></header>
  <article>
    <p>自适应宽度不能与垂直排列同时使用</p>
    <p><code>.nav-justified</code></p>
    <div spellcheck="false" class="example">
      <ul class="nav nav-primary nav-justified">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-justified nav-tabs">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary nav-justified">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-justified nav-pills">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>

<section>
  <header><h3>带标题的导航</h3></header>
  <article>
    <div spellcheck="false" class="example">
      <ul class="nav nav-tabs">
        <li class="nav-heading">这是标题</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-pills">
        <li class="nav-heading">这是标题</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary">
        <li class="nav-heading">This is heading</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">个人资料</a>
        </li>
        <li class="disabled">
          <a href="###">消息</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-primary nav-stacked">
        <li class="nav-heading">这是标题</li>
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary nav-stacked">
        <li class="nav-heading">THIS IS HEADINGS</li>
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-stacked nav-pills">
        <li class="nav-heading">THIS IS HEADINGS</li>
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">个人资料 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">消息 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">Lorem ipsum.</a>
            </li>
            <li>
              <a href="">Optio, fuga.</a>
            </li>
            <li>
              <a href="">Dicta, vero.</a>
            </li>
            <li>
              <a href="">Doloribus, obcaecati.</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </article>
</section>
<br>
<br>
<br>
<br>
<br>
